<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>商品页面</title>

  <link href="static/css/admin.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/amazeui.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/demo.css" rel="stylesheet" type="text/css"/>
  <link type="text/css" href="static/css/optstyle.css" rel="stylesheet"/>
  <link type="text/css" href="static/css/style.css" rel="stylesheet"/>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
</head>

<body>
<div id="container5">
  <!--顶部导航条 -->
  <div class="am-container header">
    <ul class="message-l">
      <div class="topMessage">
        <div v-if="isLogin" class="menu-hd">
          <a href="#" target="_top" class="h">{{ username }}, 欢迎您</a>
        </div>
        <div v-else class="menu-hd">
          <a href="#" target="_top" class="h">亲，请登录</a>
          <a href="#" target="_top">免费注册</a>
        </div>
      </div>
    </ul>
    <ul class="message-r">
      <div class="topMessage home">
        <div class="menu-hd"><a href="index.html" target="_top" class="h"><i
          class="am-icon-home">商城首页</i></a></div>
      </div>
      <div class="topMessage my-shangcheng">
        <div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top"><i
          class="am-icon-user am-icon-fw"></i>个人中心</a>
        </div>
      </div>
      <div class="topMessage mini-cart">
        <div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
          class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                class="h">0</strong></a></div>
      </div>
      <div class="topMessage favorite">
        <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
        </div>
      </div>
    </ul>
  </div>
  <!--悬浮搜索框-->
  <div class="nav white">
    <div class="logo"><img src="static/images/logo.png"/></div>
    <div class="logoBig">
      <li><img src="static/images/logo.png"/></li>
    </div>
    <div class="search-bar pr">
      <a name="index_none_header_sysc" href="#"></a>
      <form>
        <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
        <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
      </form>
    </div>
  </div>
  <div class="clear"></div>
  <b class="line"></b>
  <div class="listMain">

    <!--分类-->
    <div class="nav-table">
      <div class="long-title"><span class="all-goods">全部分类</span></div>
      <div class="nav-cont">
        <ul>
          <li class="index"><a href="#">首页</a></li>
          <li class="qc"><a href="#">闪购</a></li>
          <li class="qc"><a href="#">限抢</a></li>
          <li class="qc"><a href="#">团购</a></li>
          <li class="qc last"><a href="#">优惠</a></li>
        </ul>
        <div class="nav-extra">
          <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
          <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
      </div>
    </div>
    <ol class="am-breadcrumb am-breadcrumb-slash">
      <li><a href="#">首页</a></li>
      <li><a href="#">分类</a></li>
      <li class="am-active">内容</li>
    </ol>

    <div class="scoll">
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="static/images/01.jpg" title="pic"/>
            </li>
            <li>
              <img src="static/images/02.jpg"/>
            </li>
            <li>
              <img src="static/images/03.jpg"/>
            </li>
          </ul>
        </div>
      </section>
    </div>

    <!--放大镜-->

    <div class="item-inform">
      <div class="clearfixLeft" id="clearcontent">
        <div class="box">
          <template v-if="productImgs.length > 0">
            <div class="tb-booth tb-pic tb-s310">
              <a :href="'static/images/' + productImgs[0].url">
                <img :src="'static/images/' + productImgs[0].url" alt="细节展示放大镜特效"
                     :rel="'static/images/' + productImgs[0].url" class="jqzoom"/>
              </a>
            </div>
          </template>
          <ul class="tb-thumb" id="thumblist">
            <template v-for="(img, index) in productImgs">
              <li :class="{'tb-selected': index==0}">
                <div class="tb-pic tb-s40">
                  <a href="#"><img :src="'static/images/' + img.url" :mid="'static/images/' + img.url"
                                   :big="'static/images/' + img.url" alt=""></a>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <div class="clear"></div>
      </div>

      <div class="clearfixRight">

        <!--规格属性-->
        <!--名称-->
        <div class="tb-detail-hd">
          <h1>
            {{ product.productName }}
          </h1>
        </div>
        <div class="tb-detail-list">
          <!--价格-->
          <div class="tb-detail-price" v-if="productSkus.length > 0">
            <li class="price iteminfo_price">
              <dt>促销价</dt>
              <dd><em>¥</em><b class="sys_item_price">{{ productSkus[currentSkuIndex].sellPrice }}</b></dd>
            </li>
            <li class="price iteminfo_mktprice">
              <dt>原价</dt>
              <dd><em>¥</em><b class="sys_item_mktprice">{{ productSkus[currentSkuIndex].originalPrice }}</b></dd>
            </li>
            <div class="clear"></div>
          </div>

          <!--地址-->
          <dl class="iteminfo_parameter freight">
            <dt>配送至</dt>
            <div class="iteminfo_freprice">
              <div class="am-form-content address">
                <select data-am-selected>
                  <option value="a">浙江省</option>
                  <option value="b">湖北省</option>
                </select>
                <select data-am-selected>
                  <option value="a">温州市</option>
                  <option value="b">武汉市</option>
                </select>
                <select data-am-selected>
                  <option value="a">瑞安区</option>
                  <option value="b">洪山区</option>
                </select>
              </div>
              <div class="pay-logis">
                快递<b class="sys_item_freprice">10</b>元
              </div>
            </div>
          </dl>
          <div class="clear"></div>

          <!--销量-->
          <ul class="tm-ind-panel">
            <li class="tm-ind-item tm-ind-sumCount canClick">
              <div class="tm-indcon"><span class="tm-label">累计销量</span><span class="tm-count">{{
                  product.soldNum
                }}</span></div>
            </li>
            <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
              <div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">640</span></div>
            </li>
          </ul>
          <div class="clear"></div>
          <!--各种规格-->
          <div class="iteminfo_parameter sys_item_specpara">
            <dt class="theme-login">
              <div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div>
            </dt>
            <dd>
              <!--操作页面-->
              <div class="theme-popover-mask"></div>
              <div class="theme-popover">
                <div class="theme-span"></div>
                <div class="theme-poptit">
                  <a href="javascript:;" title="关闭" class="close">×</a>
                </div>
                <div class="theme-popbod dform">
                  <form class="theme-signin" name="loginform" action="" method="post">
                    <div class="theme-signin-left">
                      <!-- 显示商品套餐名选项（当套餐数量>1时显示） -->
                      <template v-if="productSkus.length > 1">
                        <div class="theme-options">
                          <div class="cart-title">套餐</div>
                          <ul>
                            <template v-for="(sku, index) in productSkus">
                              <!-- 如果当前套餐是正在显示的套餐，则选中效果 -->
                              <li :class="{'sku-line': true, 'selected': index==currentSkuIndex}" :data-index="index"
                                  @click="changeSkuIndex(index)">{{ sku.skuName }}<i></i></li>
                            </template>
                          </ul>
                        </div>
                      </template>
                      <div id="props">
                        <!--显示当前套餐下的属性skuProps 对象/Map-->
                        <div v-for="(value, key) in skuProps" class="theme-options">
                          <div class="cart-title">{{ key }}</div>
                          <ul>
                            <template v-for="(v1, index) in value">
                              <li :class="{'sku-line':true,'selected':index==0}" :data-v="v1" :name="key"
                                  @click="changeProp(key, v1)">{{ v1 }}<i></i></li>
                            </template>
                          </ul>
                        </div>
                      </div>
                      <div class="theme-options">
                        <div class="cart-title number">数量</div>
            <dd>
              <input id="min" class="am-btn am-btn-default" type="button" value="-" @click="changeNum(-1)"/>
              <input id="text_box" v-model="num" type="text" value="1" style="width:30px;"/>
              <input id="add" class="am-btn am-btn-default" type="button" value="+" @click="changeNum(1)"/>
              <span id="stock1" class="tb-hidden">库存<span class="stock" v-if="productSkus.length > 0">{{
                  productSkus[currentSkuIndex].stock
                }}</span>件</span>
            </dd>
          </div>
        </div>
        </form>
      </div>
      <div class="clear"></div>

      <div class="btn-op">
        <div class="btn am-btn am-btn-warning">确认</div>
        <div class="btn close am-btn am-btn-warning">取消</div>
      </div>
    </div>
    <div class="theme-signin-right">
      <div class="img-info">
        <img src="static/images/songzi.jpg"/>
      </div>
      <div class="text-info">
        <span class="J_Price price-now">¥39.00</span>
        <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
      </div>
    </div>
  </div>
  </dd>
  </dl>
  <div class="clear"></div>
  <!--活动	-->
  <div class="shopPromotion gold">
    <div class="hot">
      <dt class="tb-metatit">折扣</dt>
      <div class="gold-list">
        <p v-if="productSkus.length > 0">
          当前套餐享{{ 10 * productSkus[currentSkuIndex].discounts }}折优惠
          <!--          <span>点击领券<i class="am-icon-sort-down"></i></span>-->
        </p>
      </div>
    </div>
    <div class="clear"></div>
    <div class="coupon">
      <dt class="tb-metatit">优惠券</dt>
      <div class="gold-list">
        <ul>
          <li>125减5</li>
          <li>198减10</li>
          <li>298减20</li>
        </ul>
      </div>
    </div>
  </div>
</div>
  <div class="pay">
    <div class="pay-opt">
      <a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
      <a><span class="am-icon-heart am-icon-fw">收藏</span></a>
    </div>
    <li>
      <div class="clearfix tb-btn tb-btn-buy theme-login">
        <a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>
      </div>
    </li>
    <li>
      <div class="clearfix tb-btn tb-btn-basket theme-login">
        <a id="LikBasket" title="加入购物车" href="shopcart.html" @click="addShopCart"><i></i>加入购物车</a>
      </div>
    </li>
  </div>
<div class="clear"></div>
<!--优惠套装-->
<div class="match">
  <div class="match-title">优惠套装</div>
  <div class="match-comment">
    <ul class="like_list">
      <li>
        <div class="s_picBox">
          <a class="s_pic" href="#"><img src="static/images/cp.jpg"></a>
        </div>
        <a class="txt" target="_blank" href="#">萨拉米 1+1小鸡腿</a>
        <div class="info-box"><span class="info-box-price">¥ 29.90</span> <span
          class="info-original-price">￥ 199.00</span></div>
      </li>
      <li class="plus_icon"><i>+</i></li>
      <li>
        <div class="s_picBox">
          <a class="s_pic" href="#"><img src="static/images/cp2.jpg"></a>
        </div>
        <a class="txt" target="_blank" href="#">ZEK 原味海苔</a>
        <div class="info-box"><span class="info-box-price">¥ 8.90</span> <span
          class="info-original-price">￥ 299.00</span></div>
      </li>
      <li class="plus_icon"><i>=</i></li>
      <li class="total_price">
        <p class="combo_price"><span class="c-title">套餐价:</span><span>￥35.00</span></p>
        <p class="save_all">共省:<span>￥463.00</span></p> <a href="#" class="buy_now">立即购买</a></li>
      <li class="plus_icon"><i class="am-icon-angle-right"></i></li>
    </ul>
  </div>
</div>
<div class="clear"></div>
<!-- introduce-->
<div class="introduce">
  <div class="browse">
    <div class="mc">
      <ul>
        <div class="mt">
          <h2>看了又看</h2>
        </div>
        <li class="first">
          <div class="p-img">
            <a href="#"> <img class="" src="static/images/browse1.jpg"> </a>
          </div>
          <div class="p-name"><a href="#">
            【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
          </a>
          </div>
          <div class="p-price"><strong>￥35.90</strong></div>
        </li>
        <li>
          <div class="p-img">
            <a href="#"> <img class="" src="static/images/browse1.jpg"> </a>
          </div>
          <div class="p-name"><a href="#">
            【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
          </a>
          </div>
          <div class="p-price"><strong>￥35.90</strong></div>
        </li>
        <li>
          <div class="p-img">
            <a href="#"> <img class="" src="static/images/browse1.jpg"> </a>
          </div>
          <div class="p-name"><a href="#">
            【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
          </a>
          </div>
          <div class="p-price"><strong>￥35.90</strong></div>
        </li>
        <li>
          <div class="p-img">
            <a href="#"> <img class="" src="static/images/browse1.jpg"> </a>
          </div>
          <div class="p-name"><a href="#">
            【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味
          </a>
          </div>
          <div class="p-price"><strong>￥35.90</strong></div>
        </li>
        <li>
          <div class="p-img">
            <a href="#"> <img class="" src="static/images/browse1.jpg"> </a>
          </div>
          <div class="p-name"><a href="#">
            【三只松鼠_开口松子218g】零食坚果特产炒货东北红松子原味
          </a>
          </div>
          <div class="p-price"><strong>￥35.90</strong></div>
        </li>
      </ul>
    </div>
  </div>
  <div class="introduceMain">
    <div class="am-tabs" data-am-tabs>
      <ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
        <li class="am-active">
          <a href="#">
            <span class="index-needs-dt-txt">宝贝详情</span></a>
        </li>
        <li>
          <a href="#">
            <span class="index-needs-dt-txt">全部评价</span></a>
        </li>
        <li>
          <a href="#">
            <span class="index-needs-dt-txt">猜你喜欢</span></a>
        </li>
      </ul>
      <div class="am-tabs-bd">
        <div class="am-tab-panel am-fade am-in am-active">
          <div class="J_Brand">
            <div class="attr-list-hd tm-clear">
              <h4>产品参数：</h4></div>
            <div class="clear"></div>
            <ul id="J_AttrUL">
              <li title="">产地:&nbsp;{{ productParams.productPlace }}</li>
              <li title="">保质期:&nbsp;{{ productParams.footPeriod }}</li>
              <li title="">品牌名:&nbsp;{{ productParams.brand }}</li>
              <li title="">生产厂名:&nbsp;{{ productParams.factoryName }}</li>
              <li title="">生产厂址:&nbsp;{{ productParams.factoryAddress }}</li>
              <li title="">包装方式:&nbsp;{{ productParams.packagingMethod }}</li>
              <li title="">规格重量:&nbsp;{{ productParams.weight }}</li>
              <li title="">存储方法：&nbsp;{{ productParams.packagingMethod }}</li>
              <li title="">食用方式：&nbsp;{{ productParams.eatMethod }}</li>
            </ul>
            <div class="clear"></div>
          </div>

          <div class="details">
            <div class="attr-list-hd after-market-hd">
              <h4>商品细节</h4>
            </div>
            <div class="twlistNews">
              <span v-html="product.content"></span>
            </div>
          </div>
          <div class="clear"></div>

        </div>
        <!--商品参数和商品细节-->
        <div class="am-tab-panel am-fade">
          <div class="actor-new">
            <div class="rate">
              <strong>{{ commentsCountMap.pencent }}<span>%</span></strong><br><span>好评度</span>
            </div>
            <dl>
              <dt>买家印象</dt>
              <dd class="p-bfc">
                <q class="comm-tags"><span>味道不错</span><em>(2177)</em></q>
                <q class="comm-tags"><span>颗粒饱满</span><em>(1860)</em></q>
                <q class="comm-tags"><span>口感好</span><em>(1823)</em></q>
                <q class="comm-tags"><span>商品不错</span><em>(1689)</em></q>
                <q class="comm-tags"><span>香脆可口</span><em>(1488)</em></q>
                <q class="comm-tags"><span>个个开口</span><em>(1392)</em></q>
                <q class="comm-tags"><span>价格便宜</span><em>(1119)</em></q>
                <q class="comm-tags"><span>特价买的</span><em>(865)</em></q>
                <q class="comm-tags"><span>皮很薄</span><em>(831)</em></q>
              </dd>
            </dl>
          </div>
          <div class="clear"></div>
          <div class="tb-r-filter-bar">
            <ul class=" tb-taglist am-avg-sm-4">
              <li class="tb-taglist-li tb-taglist-li-current">
                <div class="comment-info">
                  <span>全部评价</span>
                  <span class="tb-tbcr-num">({{ commentsCountMap.total }})</span>
                </div>
              </li>

              <li class="tb-taglist-li tb-taglist-li-1">
                <div class="comment-info">
                  <span>好评</span>
                  <span class="tb-tbcr-num">({{ commentsCountMap.goodTotal }})</span>
                </div>
              </li>

              <li class="tb-taglist-li tb-taglist-li-0">
                <div class="comment-info">
                  <span>中评</span>
                  <span class="tb-tbcr-num">({{ commentsCountMap.midTotal }})</span>
                </div>
              </li>

              <li class="tb-taglist-li tb-taglist-li--1">
                <div class="comment-info">
                  <span>差评</span>
                  <span class="tb-tbcr-num">({{ commentsCountMap.badTotal }})</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="clear"></div>

          <ul class="am-comments-list am-comments-list-flip">
            <template v-for="(comment, index) in productComments">
              <li class="am-comment">
                <!-- 评论容器 -->
                <a href="">
                  <!-- 评论者头像 -->
                  <img class="am-comment-avatar" :src="'static/' + comment.userImg"/>
                </a>
                <div class="am-comment-main">
                  <!-- 评论内容容器 -->
                  <header class="am-comment-hd">
                    <!--<h3 class="am-comment-title">评论标题</h3>-->
                    <div class="am-comment-meta">
                      <!-- 评论元数据 -->
                      <a href="#link-to-user" class="am-comment-author">
                        {{
                          comment.username.substring(0, 2) + "****" + comment.username.substring(comment.username.length - 1)
                        }}
                        <span v-if="comment.isAnonymous == 1">(匿名)</span>
                        <span v-else>({{ comment.nickname }})</span>
                      </a>
                      <!-- 评论者 -->
                      评论于
                      <time datetime="" v-if="comment.sepcName.length > 0">{{
                          comment.sepcName.substring(0, 10)
                        }}
                      </time>
                    </div>
                  </header>
                  <div class="am-comment-bd">
                    <div class="tb-rev-item " data-id="255776406962">
                      <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                        {{ comment.commContent }}
                      </div>
                      <div v-if="comment.replyStatus == 1" class="tb-r-act-bar">
                        <hr>
                        <label style="color: gray; font-weight: bold">商家回复: </label>
                        <time datetime="" v-if="comment.replyTime.length > 0">回复于 {{
                            comment.replyTime.substring(0, 10)
                          }}
                        </time>
                        <br>
                        {{ comment.replyContent }}
                      </div>
                    </div>
                  </div>
                  <!-- 评论内容 -->
                </div>
              </li>
            </template>
          </ul>

          <div class="clear"></div>

          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="limit"
            :total="count"
            :current-page="pageNum"
            @current-change="pager">
          </el-pagination>
          <div class="clear"></div>

          <div class="tb-reviewsft">
            <div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#" target="_blank">购物保障</a>，明确您的售后保障权益。</div>
          </div>

        </div>

        <div class="am-tab-panel am-fade">
          <div class="like">
            <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
              <li>
                <div class="i-pic limit">
                  <img src="static/images/imgsearch1.jpg"/>
                  <p>【良品铺子_开口松子】零食坚果特产炒货
                    <span>东北红松子奶油味</span></p>
                  <p class="price fl">
                    <b>¥</b>
                    <strong>298.00</strong>
                  </p>
                </div>
              </li>
              <li>
                <div class="i-pic limit">
                  <img src="static/images/imgsearch1.jpg"/>
                  <p>【良品铺子_开口松子】零食坚果特产炒货
                    <span>东北红松子奶油味</span></p>
                  <p class="price fl">
                    <b>¥</b>
                    <strong>298.00</strong>
                  </p>
                </div>
              </li>
              <li>
                <div class="i-pic limit">
                  <img src="static/images/imgsearch1.jpg"/>
                  <p>【良品铺子_开口松子】零食坚果特产炒货
                    <span>东北红松子奶油味</span></p>
                  <p class="price fl">
                    <b>¥</b>
                    <strong>298.00</strong>
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div class="clear"></div>

          <!--分页 -->
          <ul class="am-pagination am-pagination-right">
            <li class="am-disabled"><a href="#">&laquo;</a></li>
            <li class="am-active"><a href="#">1</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
          <div class="clear"></div>

        </div>

      </div>

    </div>

    <div class="clear"></div>

    <div class="footer">
      <div class="footer-hd">
        <p>
          <a href="#">启真商城</a>
          <b>|</b>
          <a href="#">商城首页</a>
          <b>|</b>
          <a href="#">支付宝</a>
          <b>|</b>
          <a href="#">物流</a>
        </p>
      </div>
      <div class="footer-bd">
        <p>
          <a href="#">关于Zan-Shop</a>
          <a href="#">合作伙伴</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <em>com.zan.shop 版权所有</em>
        </p>
      </div>
    </div>
  </div>

</div>
<script type="text/javascript" src="static/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="static/js/quick_links.js"></script>
<script type="text/javascript" src="static/js/amazeui.js"></script>
<script type="text/javascript" src="static/js/jquery.imagezoom.min.js"></script>
<script type="text/javascript" src="static/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="static/js/list.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript" src="static/js/utils.js"></script>
<script type="text/javascript">
  $(function () {
  });
  $(window).load(function () {
    $('.flexslider').flexslider({
      animation: "slide",
      start: function (slider) {
        $('body').removeClass('loading');
      }
    });
  });
</script>
<script type="text/javascript">
  $(document).ready(function () {
    $(".jqzoom").imagezoom();
    $("#thumblist li a").click(function () {
      $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
      $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
      $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
    });
  });
</script>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.5/dist/layui.js"></script>
<script type="text/javascript" src="static/js/cookie-utils.js"></script>
<!-- 引入组件库 这个必须放下下面，放在上面加载不出来-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>

<script type="text/javascript">
  var layer;
  layui.use('layer', function () {
    layer = layui.layer;
  });

  var vm = new Vue({
    el: "#container5",
    data: {
      productId: "",
      product: {
        productName: "", //让vue进行初次渲染时有数据显示
        soldNum: 0
      },
      productImgs: [],
      productSkus: [],
      currentSkuIndex: 0, //当前选择的套餐的索引（默认为0）
      skuProps: {}, //相当于一个map，用于存放当前套餐的属性
      productParams: {},
      productComments: [],
      // 分页数据
      pageNum: 1,
      limit: 3,
      pageCount: 0,
      count: 0,
      commentsCountMap: {},
      chooseSkuProps: {}, //用于记录选择的套餐属性
      num: 1, //用于记录用户购买/添加购物车的商品数量
      isLogin: false,
      token: "",
      username: ""
    },
    methods: {
      changeSkuIndex(index) {
        // 获取点击的套餐的索引
        this.currentSkuIndex = index
        var str = this.productSkus[this.currentSkuIndex].untitled
        this.skuProps = eval("(" + str + ")")

        //重新定义选中效果（调用定义在list.js中的方法）
        initChoose()
      },
      pager(currentPage) {
        this.pageNum = currentPage
        // console.log(this.pageNum)
        // 请求下一页数据
        // 3.根据商品id查询商品评论信息
        axios.get("static/hook/introduce/detail-comments-3." + this.pageNum + ".json").then(res => {
          // 获取到评论的分页数据
          var pageHelper = res.data.data
          // 当前页的评论列表
          this.productComments = pageHelper.list
          this.pageCount = pageHelper.pageCount
          // 总记录数
          this.count = pageHelper.count
        })
      },
      changeProp(key, v1) {
        this.chooseSkuProps[key] = v1 + ";"
      },
      changeNum(m) {
        if (m == -1 && this.num > 1) {
          this.num = this.num - 1
        } else if (m == 1 && this.num < this.productSkus[this.currentSkuIndex].stock) {
          this.num = parseInt(this.num) + 1
        }
      },
      addShopCart() {
        // 套餐属性转换成字符串
        var propStr = ""
        for (var key in this.chooseSkuProps) { // {口味:烧烤;}
          propStr += key + ":" + this.chooseSkuProps[key] + ";"
        }
        // console.log(propStr)
        // 从cookie获取userId
        var uid = getCookieValue("userId")

        // 准备购物车信息
        var cart = {
          "cartNum": this.num,
          "productId": this.productId,
          "productPrice": this.productSkus[this.currentSkuIndex].sellPrice,
          "skuId": this.productSkus[this.currentSkuIndex].skuId,
          "skuProps": propStr,
          "userId": uid
        }
        // 从cookie获取token
        var token = getCookieValue("token")
        // 添加购物车
        var url5 = baseUrl + "/shopcart/add"
        axios({
          url: url5,
          method: "post",
          headers: {
            "token": token
          },
          data: cart
        }).then(res => {
          // console.log(res)
          // 处理添加购物车的回调
          if (res.data.code == 10000) {
            // 添加购物车成功
            layer.msg("添加购物车成功")
          } else if (res.data.code == 10001) {
            // 添加购物车失败
            layer.msg("添加购物车失败")
          } else {
            var str = ""
            if (res.data.code == 20001) {
              // 用户未登录
              str = "请先登录"
            } else if (res.data.code == 20002) {
              // 登录已过期
              str = "登录过期，请重新登录"
            }
            var params = "tips=" + str + "&returnUrl=introduction.html&pid=" + this.productId + "&sid=" + this.currentSkuIndex + "&num=" + this.num
            var loginUrl = "login.html?" + params
            var url = encodeURI(loginUrl)
            // console.log(url)
            // 跳转到登录页面
            window.location.href = url
          }
        })
      }
    },
    created() {
      // 获取到url传递的商品id
      this.productId = getUrlParam("pid")
      this.currentSkuIndex = getUrlParam("sid") != null ? getUrlParam("sid") : 0
      this.num = getUrlParam("num") != null ? getUrlParam("num") : 1
      this.token = getCookieValue("token")
      if (this.token != null && this.token != "") {
        this.isLogin = true
        this.username = getCookieValue("username")
      }

      // 1.根据商品id查询商品基本信息
      axios.get("static/hook/introduce/detail-info-3.json").then(res => {
        var map = res.data.data
        this.product = map.product
        this.productImgs = map.productImgs
        this.productSkus = map.productSkus

        // skuProps默认显示第一个套餐的属性
        var str = this.productSkus[0].untitled
        this.skuProps = eval("(" + str + ")")
      })

      // 2.根据商品id查询商品参数信息
      axios.get("static/hook/introduce/detail-params-3.json").then(res => {
        this.productParams = res.data.data
      })

      // 3.根据商品id查询商品评论信息
      axios.get("static/hook/introduce/detail-comments-3.1.json").then(res => {
        // 获取到评论的分页数据
        var pageHelper = res.data.data
        // 当前页的评论列表
        this.productComments = pageHelper.list
        this.pageCount = pageHelper.pageCount
        // 总记录数
        this.count = pageHelper.count
      })

      // 4.根据商品id查询评价统计信息
      axios.get("static/hook/introduce/detail-comments-count-3.json").then(res => {
        this.commentsCountMap = res.data.data
      })
    },
    updated() {
      // 每次重新渲染之后执行
      $(document).ready(function () {
        $(".jqzoom").imagezoom();
        $("#thumblist li a").click(function () {
          $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
          $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
          $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
        });
      });

      //重新定义选中效果（调用定义在list.js中的方法）
      initChoose()
    },
    watch: {
      skuProps() {
        // 获取当前套餐的属性中的第一个值为默认选中的属性
        this.chooseSkuProps = {}
        for (var key in this.skuProps) {
          this.chooseSkuProps[key] = this.skuProps[key][0]
        }
      }
    }
  })
</script>
</body>
</html>
